<template>
  <div>
    <div
      class="absolute w-[367px] py-[32px] px-[24px] rounded-[10px] top-[30px] bg-[#fff] right-0 z-10 box"
      v-if="visible"
    >
      <div class="text-[#101010] text-[14px] relative font-semibold pl-[10px] tit"> 订单日志 </div>
      <div class="mt-[30px] h-[350px] overflow-y-scroll timeline">
        <div class="flex timeline-item" v-for="(item, index) in list" :key="index">
          <div class="text-end shrink-0 time">
            <div class="text-[14px] text-[#101010] date">
              {{ dayjs(item.createTime).format('YYYY-MM-DD') }}
            </div>
            <div class="text-[12px] text-[#999] time">
              {{ dayjs(item.createTime).format(' HH:mm:ss') }}
            </div>
          </div>
          <div class="mx-[16px] relative shrink-0 icon">
            <div
              class="w-[17px] h-[17px] relative z-2 bg-[#fff] iconbox"
              v-if="activeIndex == index"
            >
              <img :src="Selected" class="w-full h-full object-contain" />
            </div>
            <div class="w-[17px] h-[17px] relative z-2 bg-[#fff] iconbox" v-else>
              <img :src="Unselected" class="w-full h-full object-contain" />
            </div>
          </div>
          <div class="pb-[15px] info">
            <div class="text-[#3721FF] tag">#{{ item.operation }}</div>
            <div class="mt-[6px] cont">
              <div class="flex items">
                <div class="text-[#999] text-[12px] shrink-0 label">操作人：</div>
                <div class="text-[#999] text-[12px] val"> {{ item.operationName || '-' }} </div>
              </div>
              <!-- <div class="flex mt-[2px] items">
                <div class="text-[#999] text-[12px] shrink-0 label">修改前/修改后：</div>
                <div class="text-[#999] text-[12px] val">
                  {{ item.beforeModify || '-' }} / {{ item.afterModify || '-' }}
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Selected from '@/assets/mall/trade/order/selected.png'
import Unselected from '@/assets/mall/trade/order/unselected.png'
import * as TradeOrderApi from '@/api/mall/trade/order'
import dayjs from 'dayjs'

const props = defineProps({
  orderNo: {
    type: [String, Number],
    required: true,
    default: ''
  }
})

const activeIndex = ref(0)

const list = ref<TradeOrderApi.ProductOrderLogRespVO[]>([])

// 监听 orderNo 的变化
watch(
  () => props.orderNo,
  async (newOrderNo) => {
    if (newOrderNo) {
      try {
        // 通过接口获取订单详情
        const response = await TradeOrderApi.getOrderLogList(props.orderNo)
        list.value = response
      } catch (error) {
        console.error('获取订单详情失败:', error)
      }
    }
  },
  { immediate: true, deep: true }
)

const visible = ref(false)

const show = () => {
  visible.value = true
}

const hide = () => {
  visible.value = false
}

defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped>
.box {
  box-shadow: 0px 4px 12px 1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e4e4;
  // filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 1));
  &::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-left: 1px solid #e4e4e4;
    border-top: 1px solid #e4e4e4;
    transform: rotate(45deg);
    top: -6px;
    right: 20px;
  }
}
.tit {
  &::before {
    content: '';
    width: 2px;
    height: 7px;
    position: absolute;
    top: 8px;
    left: 0px;
    background: #3721ff;
    border-radius: 0 2px 2px 0;
    display: block;
    z-index: 1;
  }
}
.timeline::-webkit-scrollbar {
  width: 4px !important;
  height: 100px !important;
  background-color: #e4e4e4 !important;
  border-radius: 10px;
}
.timeline::-webkit-scrollbar-thumb {
  background-color: #3721ff;
  border-radius: 10px;
}
.timeline-item {
  .icon {
    background-color: #fff;

    &::before {
      content: '';
      width: 1px;
      height: 100%;
      background-color: #e4e4e4;
      display: block;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }
  }
  &:last-child {
    .icon {
      &::before {
        display: none;
      }
    }
  }
}
</style>
